<template>
  <div class="test-container">
    <h1>Floating 组件完整测试</h1>

    <!-- 1. 触发方式测试 -->
    <section class="test-section">
      <h2>1. 触发方式测试</h2>

      <div class="test-group">
        <h3>Click 触发</h3>
        <Floating trigger="click" placement="bottom">
          <button class="btn btn-primary">点击我</button>
          <template #content>
            <div class="floating-content">
              <p>点击触发的内容</p>
              <p>再次点击按钮或点击外部关闭</p>
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>Hover 触发（带延迟）</h3>
        <Floating
            trigger="hover"
            placement="top"
            :delay="{ show: 500, hide: 300 }"
        >
          <button class="btn btn-success">悬停在我上面</button>
          <template #content>
            <div class="floating-content">
              <p>悬停触发的内容</p>
              <p>延迟显示: 500ms, 延迟隐藏: 300ms</p>
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>Focus 触发</h3>
        <Floating trigger="focus" placement="right" :close-on-blur="true">
          <input
              type="text"
              placeholder="点击输入框获得焦点"
              class="input-field"
          />
          <template #content>
            <div class="floating-content">
              <p>输入框聚焦时显示</p>
              <p>失去焦点时自动关闭</p>
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>Manual 触发</h3>
        <div class="manual-controls">
          <button @click="manualFloating?.show()" class="btn btn-sm">显示</button>
          <button @click="manualFloating?.hide()" class="btn btn-sm">隐藏</button>
          <button @click="manualFloating?.toggle()" class="btn btn-sm">切换</button>
        </div>
        <Floating ref="manualFloating" trigger="manual" placement="bottom">
          <div class="manual-target">手动控制的目标元素</div>
          <template #content>
            <div class="floating-content">
              通过上方按钮控制显示/隐藏
            </div>
          </template>
        </Floating>
      </div>
    </section>

    <!-- 2. 位置测试 -->
    <section class="test-section">
      <h2>2. 位置测试</h2>
      <div class="position-demo">
        <div class="position-center">
          <Floating trigger="hover" placement="top" :offset="10">
            <button class="btn btn-position">上方 (top)</button>
            <template #content>
              <div class="floating-content small">Top</div>
            </template>
          </Floating>
        </div>

        <div class="position-row">
          <Floating trigger="hover" placement="left" :offset="10">
            <button class="btn btn-position">左侧 (left)</button>
            <template #content>
              <div class="floating-content small">Left</div>
            </template>
          </Floating>

          <div class="position-spacer"></div>

          <Floating trigger="hover" placement="right" :offset="10">
            <button class="btn btn-position">右侧 (right)</button>
            <template #content>
              <div class="floating-content small">Right</div>
            </template>
          </Floating>
        </div>

        <div class="position-center">
          <Floating trigger="hover" placement="bottom" :offset="10">
            <button class="btn btn-position">下方 (bottom)</button>
            <template #content>
              <div class="floating-content small">Bottom</div>
            </template>
          </Floating>
        </div>
      </div>
    </section>

    <!-- 3. 尺寸控制测试 -->
    <section class="test-section">
      <h2>3. 尺寸控制测试</h2>

      <div class="test-group">
        <h3>固定宽度 (300px)</h3>
        <Floating trigger="click" placement="bottom" :width="300">
          <button class="btn btn-primary">固定宽度浮动框</button>
          <template #content>
            <div class="floating-content">
              这个浮动框的宽度被设置为 300px
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>最大高度与滚动 (150px)</h3>
        <Floating
            trigger="click"
            placement="bottom"
            :width="250"
            :max-height="150"
        >
          <button class="btn btn-primary">带滚动的浮动框</button>
          <template #content>
            <div class="floating-content">
              <p v-for="i in 10" :key="i" class="scroll-item">
                第 {{ i }} 行内容 - 当内容超过最大高度时会出现滚动条
              </p>
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>默认宽度（跟随触发元素）</h3>
        <Floating trigger="click" placement="bottom">
          <button class="btn btn-wide">这是一个很宽的按钮，浮动框会自动匹配宽度</button>
          <template #content>
            <div class="floating-content">
              宽度自动匹配
            </div>
          </template>
        </Floating>
      </div>
    </section>

    <!-- 4. 关闭行为测试 -->
    <section class="test-section">
      <h2>4. 关闭行为测试</h2>

      <div class="test-group">
        <h3>点击外部关闭（默认开启）</h3>
        <Floating
            trigger="click"
            placement="bottom"
            :close-on-click-outside="true"
        >
          <button class="btn btn-warning">点击我，然后点击外部</button>
          <template #content>
            <div class="floating-content">
              点击浮动框外部区域会自动关闭
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>ESC 键关闭（默认开启）</h3>
        <Floating
            trigger="click"
            placement="bottom"
            :close-on-escape="true"
        >
          <button class="btn btn-warning">点击我，然后按 ESC</button>
          <template #content>
            <div class="floating-content">
              按下 ESC 键会关闭浮动框
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>禁用所有自动关闭</h3>
        <Floating
            trigger="click"
            placement="bottom"
            :close-on-click-outside="false"
            :close-on-escape="false"
        >
          <button class="btn btn-danger">只能通过再次点击关闭</button>
          <template #content>
            <div class="floating-content">
              <p>点击外部不会关闭</p>
              <p>按 ESC 也不会关闭</p>
              <p>只能再次点击按钮关闭</p>
            </div>
          </template>
        </Floating>
      </div>
    </section>

    <!-- 5. 禁用状态测试 -->
    <section class="test-section">
      <h2>5. 禁用状态测试</h2>

      <div class="test-group">
        <Floating trigger="click" :disabled="isDisabled" placement="bottom">
          <button class="btn" :class="isDisabled ? 'btn-disabled' : 'btn-primary'">
            {{ isDisabled ? '已禁用' : '已启用' }}
          </button>
          <template #content>
            <div class="floating-content">
              这个浮动框可以被禁用
            </div>
          </template>
        </Floating>
        <button @click="isDisabled = !isDisabled" class="btn btn-sm" style="margin-left: 10px">
          切换禁用状态
        </button>
      </div>
    </section>

    <!-- 6. 偏移量测试 -->
    <section class="test-section">
      <h2>6. 偏移量测试</h2>

      <div class="test-group">
        <h3>主轴偏移 20px</h3>
        <Floating trigger="hover" placement="bottom" :offset="20">
          <button class="btn btn-info">悬停查看偏移</button>
          <template #content>
            <div class="floating-content">
              距离按钮 20px
            </div>
          </template>
        </Floating>
      </div>

      <div class="test-group">
        <h3>主轴 10px, 交叉轴 5px</h3>
        <Floating trigger="hover" placement="right" :offset="[10, 5]">
          <button class="btn btn-info">悬停查看偏移</button>
          <template #content>
            <div class="floating-content">
              主轴偏移 10px<br>
              交叉轴偏移 5px
            </div>
          </template>
        </Floating>
      </div>
    </section>

    <!-- 7. 边界测试 -->
    <section class="test-section">
      <h2>7. 边界测试（自动调整位置）</h2>

      <div class="boundary-test">
        <div class="corner top-left">
          <Floating trigger="hover" placement="top">
            <button class="btn btn-sm">左上角</button>
            <template #content>
              <div class="floating-content">
                空间不足时自动翻转
              </div>
            </template>
          </Floating>
        </div>

        <div class="corner top-right">
          <Floating trigger="hover" placement="top">
            <button class="btn btn-sm">右上角</button>
            <template #content>
              <div class="floating-content">
                空间不足时自动翻转
              </div>
            </template>
          </Floating>
        </div>

        <div class="corner bottom-left">
          <Floating trigger="hover" placement="bottom">
            <button class="btn btn-sm">左下角</button>
            <template #content>
              <div class="floating-content">
                空间不足时自动翻转
              </div>
            </template>
          </Floating>
        </div>

        <div class="corner bottom-right">
          <Floating trigger="hover" placement="bottom">
            <button class="btn btn-sm">右下角</button>
            <template #content>
              <div class="floating-content">
                空间不足时自动翻转
              </div>
            </template>
          </Floating>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Floating from '@/components/floating/index.vue'

// Manual 模式的引用
const manualFloating = ref()

// 禁用状态
const isDisabled = ref(false)
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 40px;
}

h2 {
  color: #555;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

h3 {
  color: #666;
  margin-bottom: 15px;
}

.test-section {
  margin-bottom: 60px;
  background: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.test-group {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 4px;
}

/* 按钮样式 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-warning {
  background: #ffc107;
  color: #333;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-position {
  background: #6c757d;
  color: white;
}

.btn-disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.btn-wide {
  padding: 10px 40px;
}

/* 输入框样式 */
.input-field {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 250px;
  font-size: 14px;
}

.input-field:focus {
  outline: none;
  border-color: #007bff;
}

/* 浮动内容样式 */
.floating-content {

}

.floating-content.small {
  padding: 8px 12px;
  font-size: 12px;
}

.floating-content p {
  margin: 5px 0;
}

/* Manual 控制 */
.manual-controls {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}

.manual-target {
  display: inline-block;
  padding: 10px 20px;
  background: #e9ecef;
  border-radius: 4px;
}

/* 位置演示 */
.position-demo {
  max-width: 400px;
  margin: 0 auto;
}

.position-center {
  text-align: center;
  margin: 20px 0;
}

.position-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.position-spacer {
  width: 100px;
}

/* 滚动测试 */
.scroll-item {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

/* 边界测试 */
.boundary-test {
  position: relative;
  height: 300px;
  background: #f0f0f0;
  border: 2px dashed #999;
  border-radius: 4px;
}

.corner {
  position: absolute;
}

.corner.top-left {
  top: 10px;
  left: 10px;
}

.corner.top-right {
  top: 10px;
  right: 10px;
}

.corner.bottom-left {
  bottom: 10px;
  left: 10px;
}

.corner.bottom-right {
  bottom: 10px;
  right: 10px;
}
</style>